<template>
	<div class="mod-config">
		<div align="center">订单管理</div>
		<el-table
		    :data="dataList"
		    border
		    v-loading="dataListLoading"
		    @selection-change="selectionChangeHandle"
		    cell-style="padding: 4px 0"
		    style="width: 100%;"
		    size="medium"
		>
		<el-table-column prop="orderItemVOList" header-align="center" align="center" type="expand">
		    <template #default="scope">
		        <p> 订单详情</p>
				 <div v-for="(item, index) in scope.row.orderItemVOList" :key="index" class="item">
				            <p>商品名称: {{ item.productName }}</p>
							<p>商品图片: 
							<el-image :src="item.productImg" 
								style="width: 100px; height: 100px;"
								:fit="cover">
							</el-image>
							 </p>
				            <p>商品单价: {{ item.unitPrice / 100 }}</p>
				            <p>商品数量: {{ item.quantity }}</p>
							<p>商品总价: {{ item.totalPrice / 100 }}</p>
				            <!-- You can add other details here, based on your actual need -->
				        </div>
		    </template>
		</el-table-column>
			<el-table-column prop="orderNo" header-align="center" align="center" label="订单号">
			</el-table-column>
			<el-table-column prop="totalPrice" header-align="center" align="center" label="订单总价(元)">
			</el-table-column>
			<el-table-column prop="orderStatus" header-align="center" align="center"
				label="订单状态">
			</el-table-column>
			<el-table-column header-align="center" align="center" label="创建时间">
				<template slot-scope="scope">
				         {{ new Date(scope.row.createTime).toLocaleString() }}
				</template>
			</el-table-column>
			<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
				<template slot-scope="scope">
					<el-button 
					class="equal-width-button" 
					type="info" 
					size="mini" 
					@click="searchReciver(scope.row.orderNo)">查看收件人信息
					</el-button>
					<el-button  :disabled="!(scope.row.orderStatus=='已付款')" class="equal-width-button" type="primary" size="mini" @click="deliver(scope.row.orderNo)">发货</el-button>
					<el-button  :disabled="!(scope.row.orderStatus=='已发货')" class="equal-width-button" type="success" size="mini" @click="complete(scope.row.orderNo)">完结订单</el-button>
				</template>
			</el-table-column>
		</el-table>
		 <el-dialog :visible.sync="dialogVisible" title="收件人信息" width="30%">
		      <p>收件人姓名: {{selectedOrder.receiver_name}}</p> 
			  <p>收件人地址: {{selectedOrder.receiver_address}}</p>
			  <p>收件人电话: {{selectedOrder.receiver_mobile}}</p>
		    </el-dialog>
		<el-pagination align="right"@size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
			:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount"
			layout="total, sizes, prev, pager, next, jumper">
		</el-pagination>
	</div>
</template>

<script>
	import AddOrUpdate from './order-add-or-update'
	export default {
		data() {
			return {
				dataForm: {
					key: ''
				},
				dataList: [],
				pageIndex: 1,
				pageSize: 10,
				totalPage: 0,
				dataListLoading: false,
				dataListSelections: [],
				addOrUpdateVisible: false,
				dialogVisible: false,
				selectedOrder: []
			}
		},
		methods: {
			// 获取数据列表
			loadDataList() {
				this.dataListLoading = true;
					this.$http.get('/admin/order/list',{
						 params:{
						      pageNum: this.pageIndex,
						      pageSize: this.pageSize
						    }
					}).then(resp =>{
							let page = resp.data.page;
							let list = page.list;
								for(let one of list){
									one.totalPrice /= 100;
									if(one.orderStatus == 0){
										one.orderStatus = '用户已取消';
									}else if(one.orderStatus == 10){
										one.orderStatus = '未付款';
									}
									else if(one.orderStatus == 20){
										one.orderStatus = '已付款';
									}
									else if(one.orderStatus == 30){
										one.orderStatus = '已发货';
									}
									else if(one.orderStatus == 40){
										one.orderStatus = '交易完成';
									}
								}
								this.dataList = list;
								this.totalCount = page.total;
								this.dataListLoading = false;
							});
						
					
				},
				searchReciver(orderNo) {
					 this.dialogVisible = true;
				      this.$http.get('/admin/product/receiver',{
				        params: { orderNo: orderNo }
				      })
				      .then(resp=>{
				        this.selectedOrder = resp.data.param;
				      })
				    },
				deliver(orderNo){
					this.$confirm('确定发货吗？','提示',{
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(()=>{
						let config = {
							params:{
								orderNo: orderNo
							}
						}
						this.$http.post('/admin/order/delivered',null,config).then(resp=>{
							if(resp.data.code == 200){
								this.$message({
									message: '发货成功！',
									type: 'success',
									diration: 1200
								});
								this.loadDataList();
							} else{
								this.$message({
									message: '发货失败！',
									type: 'warning',
									diration: 1200
								});
							}
						})
					}).catch(error=>{
						
					})
				},
				complete(orderNo){
					this.$confirm('确定完结该订单吗？','提示',{
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(()=>{
						let config = {
							params:{
								orderNo: orderNo
							}
						}
						this.$http.post('/order/finish',null,config).then(resp=>{
							if(resp.data.code == 200){
								this.$message({
									message: '该订单已完结~！',
									type: 'success',
									diration: 1200
								});
								this.loadDataList();
							} else{
								this.$message({
									message: '完结订单失败！',
									type: 'warning',
									diration: 1200
								});
							}
						})
					}).catch(error=>{
						
					})
				},
				searchReciver(orderNo){
					this.dialogVisible = true;
					this.$http.get('/admin/product/receiver',{
						params:{
						     orderNo: orderNo
						   }
					}).then(resp=>{
						this.selectedOrder = resp.data.param;
					})
				},
				// 每页数
				sizeChangeHandle(val) {
					this.pageSize = val
					this.pageIndex = 1
					this.loadDataList()
			},
			// 每页数
			sizeChangeHandle(val) {
				this.pageSize = val
				this.pageIndex = 1
				this.loadDataList()
			},
			// 当前页
			currentChangeHandle(val) {
				this.pageIndex = val
				this.loadDataList()
			},
		},
		created: function() {
			this.loadDataList();
		}
	}
</script>

<style scoped>
.equal-width-button {
    width: 120px; /* 你可以根据实际需求更改这个值 */
	margin-top: 5px;
	margin-left: 0%;
}
.item {
    border: 1px solid #ccc;
       background-color: #f9f9f9;
       padding: 20px;
       border-radius: 10px;
       margin-bottom: 20px;
}
.item p {
    font-size: 16px;
    color: #333;
}
.el-image {
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

.el-image:hover {
    transform: scale(1.05);
}

.el-dialog p {
    font-size: 18px;
    color: #333;
    line-height: 1.5;
}

.el-dialog {
    padding: 20px;
}

.el-dialog .el-dialog__title {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
}
</style>